<template>
    <div class="template" style="background-color: #ACE86D;">
        <div class="nav" style="z-index: 9999;">
            <img :src="back" style="width: 62px;" @click="router.back()"/>
            <img :src="store" style="height: 37px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"/>
            <div style="width: 62px;"/>
        </div>
        <div style="z-index: 99; width: 100vw;position: relative;">
            <div  v-for="(item, index) in buyList" :key="index" :class="index % 2 == 0 ? 'buyItem buyLeft' : 'buyItem buyRight'" :style="{top: index % 2 == 0 ? index*21+'vh': index == 3 ? '60vh' :  index*25+'vh'}">
                <div style="position: relative;" @click="buyItem(index)">
                    <img :src="left"  v-if="index % 2 == 0 " />
                    <img :src="right"  v-else />
                    <div class="coins" :style="{paddingLeft: index % 2 == 0 ? '0' : '9vw', paddingRight: index % 2 == 0 ? '7vw' : '0vw', color: index % 2 == 0 ? '#000' : '#fff'}">{{ item.num }} coins</div>
                    <div class="money" :style="{bottom: index % 2 == 0 ? '4.5vh' : '5.5vh',paddingLeft: index % 2 == 0 ? '0' : '5vw', paddingRight: index % 2 == 0 ? '7vw' : '0vw'}">${{ item.money }}</div>
                </div>
            </div>
        </div>
        <img :src="ma" class="ma"/>
        <img :src="ren" class="ren" />
        <div class="lookNum">
            <img :src="coins" />
            {{ coinsNum }}
        </div>
    </div>
</template>
<script setup>
import { showToast, showLoadingToast, closeToast } from 'vant';
import coins from '../assets/coins.png'
import ren from '../assets/ren@2x.png'
import back from '../assets/back@2x.png'
import store from '../assets/store.png'
import left from '../assets/left.png'
import right from '../assets/right.png'
import ma from '../assets/ma.png'
import { useRouter } from 'vue-router';
import { onMounted, ref} from 'vue'
import {Base64} from 'js-base64'

const router = useRouter()
const coinsNum = ref(0)

let buyList = [{num: 20, money: 1.99 },{num: 50, money: 2.99 },{num: 100, money: 4.99 },{num: 200, money: 9.99 }]
onMounted(() => {
    coinsNum.value = localStorage.getItem('MaskImageCoinsNum') ? Number(localStorage.getItem('MaskImageCoinsNum')) : 0
})
const buyItem = (index) => {
    showLoadingToast({
      duration: 0,
      message: 'Loading...',
      forbidClick: true,
    });
     window['iap'] = (data) => {
            let res;
            try {
                const decodedString = Base64.decode(data);
                res = JSON.parse(decodedString);
            } catch (error) {
                res = data;
            }
            if (res !== null && typeof res === 'object') {
                let num = res.productIdentifier.replace(/\D/g, '');
    			coinsNum.value = coinsNum.value + Number(num)
                localStorage.setItem('MaskImageCoinsNum', coinsNum.value)
    			closeToast()
            } else {
                closeToast()
                showToast('Payment failed!');
            }
            return 0;
    }
    window['send'](`terms://buy?product=com.moreuse.edtings.${buyList[index].num}s&num=1`);
}
</script>
<style scoped>
@import '../font/index.css';
.buyItem {
    /* width: 100vw; */
    /* display: flex; */
    width: auto;
    height: 25vh;
    /* display: flex; */
    margin-top: -6vh;
    position: absolute;
}
.buyItem:first-child {
    margin-top: 10px;
}
.buyLeft {
    /* justify-content: flex-start; */
}
.buyRight {
    justify-content: flex-end;
    z-index: 9;
    right: 0;
}
.buyItem img {
   height: 26vh;
}
.coins {
    position: absolute;
    top: 3vh;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 400;
    font-size: 24px;
    color: #000000;
    word-wrap: normal;
    text-align: center;
    width: 100%;
    font-family: TitanOne-Regular;
}
.money {
    position: absolute;
    bottom: 3.5vh;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
    font-size: 12px;
    color: #FFFFFF;
}
.ma {
    width: 146.52px;
    height: 139.32px;
    position: fixed;
    left: 0;
    bottom: 0;
}
.ren {
    width: 162.31px;
    height: 126.38px;
    position: fixed;
    right: 0;
    top: 17vh;
}
.lookNum {
    height: 46px;
    background: #DC87DE;
    border-radius: 23px 0px 0px 23px;
    position: fixed;
    right: 0;
    top: 9vh;
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 18px;
    color: #FFFFFF;
    padding-right: 10px;
    z-index: 999999;
}
.lookNum img {
    width: 46px;
    height: 46px;
    margin-right: 10px;  
}
</style>
